
<!-- 配料核对 -->
<template>
  <view class="container">
    <!-- 顶部标题 -->
    <TopBar title="配料核对"></TopBar>

    <!-- 显示内容区域 -->
    <!-- 输入内容区域 -->
    <view class="top-input">
      <!-- 第一行 -->
      <view class="top-input-date">
        <view class="top-input-date-title">配料单</view>
        <view top-input-date-select>
          <input class="top-input-date-input" placeholder="" />
        </view>
      </view>
      <!-- 第二行 -->
      <view class="top-input-date">
        <view class="top-input-date-title">条码</view>
        <view top-input-date-select>
          <input class="top-input-date-input" placeholder="" />
        </view>
      </view>
      <!-- 第三行 -->
      <view class="top-input-date  button-container">
        <button class="top-input-date-btn">点核</button>
        <button class="top-input-date-btn" @click="showDetail">明细</button>

      </view>
    </view>
     <!-- 显示列表区域 -->
      <scroll-view scroll-top="0" scroll-y="true" class="scroll-Y" style="height: 500px; margin-top: 20px;">
    <!-- 显示列表区域 -->
    <view class="top-list">

      <view class="top-list-title" v-for="materialList in materialList">
        <view class="top-list-title-item">
          <view class="top-list-title-item-title">
            配料编码：
          </view>
          <view> {{ materialList.materialCode }} </view>
        </view>
        <view class="top-list-title-item">
          <view class="top-list-title-item-title">
            配料名称：
          </view>
          <view> {{ materialList.materialName }} </view>
        </view>
        <view class="top-list-title-item">
          <view class="top-list-title-item-title">
            产品批号：
          </view>
          <view> {{ materialList.batchNo }} </view>
        </view>
       <view class="top-list-title-item">
          <view class="top-list-title-item-title">
            配料编号：
          </view>
          <view> {{ materialList.id }} </view>
        </view>
        <view class="top-list-title-item">
          <view class="top-list-title-item-title">
            配料条码数：
          </view>
          <view> {{ materialList.requiredQty }} </view>
        </view>
        <view class="top-list-title-item">
          <view class="top-list-title-item-title">
            上次扫描条码：
          </view>
          <view> {{ materialList.scannedQty }} </view>  
        </view>
      </view>
    </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import TopBar from "@/components/TopBar.vue"
import { ref } from 'vue';
const materialList = ref([
  {
    id: 1,                      // 唯一标识，就像商品的条形码
    materialCode: 'MAT001',     // 物料编码：系统内物料唯一编号
    materialName: '乳化剂A-102', // 物料名称：生产中实际使用的名称
    batchNo: 'B2023101501',     // 批次号：同一批生产的物料标识
    requiredQty: 50.5,          // 需求数量：工单要求的使用量
    unit: 'kg',                 // 单位：计量方式
    scannedQty: 50.5,           // 已扫描数量：实际已核对的数量
    status: 'completed'         // 状态：completed-已完成，pending-待核对
  },
  {
    id: 2,
    materialCode: 'MAT002',
    materialName: '稳定剂B-301',
    batchNo: 'B2023101602',
    requiredQty: 20.0,
    unit: 'kg',
    scannedQty: 15.5,
    status: 'pending'
  },
  {
    id: 3,
    materialCode: 'MAT003',
    materialName: '香精C-004',
    batchNo: 'B2023101701',
    requiredQty: 5.2,
    unit: 'L',
    scannedQty: 5.2,
    status: 'completed'
  },
  {
    id: 4,
    materialCode: 'MAT004',
    materialName: '色素D-205',
    batchNo: 'B2023101803',
    requiredQty: 1.5,
    unit: 'kg',
    scannedQty: 0,
    status: 'pending'
  }
]);

//明细按钮
const showDetail = () => {
  uni.navigateTo({
    url: '/pages/WorkShop/MaterialCheck/MaterialCheckDetail'
  });
}
</script>
<style scoped>
.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  /* justify-content: center; */
    min-height: 500px;
    overflow: hidden; /* 3. 隐藏容器溢出内容 */
  background-color: #F7F3F1;
  /* background-image: url("/src/static/log/Loginbg3.png"); */
  background-size: 100% 100%;
}

.top-input {
  width: 80%;
  height: auto;
  padding: 10px 30px;
  border-radius: 10px;
  background-color: aqua;
}

/* // 设置日期输入区域为弹性布局 */
.top-input-date {
  display: flex;
  /* // 设置子元素水平排列 */
  flex-direction: row;


  /* // 设置子元素在交叉轴上居中对齐 */
  align-items: center;

  margin: 10px 0px;
}

.top-input-date-title {
  width: 100px;
  /* 固定标题宽度，就像书架的隔板宽度统一 */
  text-align: left;
  /* 文字右对齐，视觉上更整齐 */
  padding-right: 10px;
  /* 标题和输入框之间留间隙 */
}

.top-input-date-input {
  width: 90%;
  height: 40px;
  border: 1px solid #000;
  border-radius: 20px;
  padding-left: 20px;
  margin-right: 0px;

}

.button-container {
  display: flex;
  /* 启用Flex布局，类似设置书架为可调节模式 */
  justify-content: space-between;
  /* 两端对齐，第一个放左边，最后一个放右边 */
}

/* 可选：给按钮添加间距，避免太靠近边缘 */
.top-input-date-btn {
  margin: 0 5px;
  /* 按钮左右各留5px间隙 */
}

.top-input-date-btn {
  background-color: rgb(3, 194, 208);
  width: 100px;
  height: 40px;
  border: 1px solid #000;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 显示列表区域 最外*/
.top-list {
  align-items: center;;
  
  
}

/* 第二 */
.top-list-title {
  padding:10px 40px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 10px;

}

.top-list-title-item {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.top-list-title-item-title{
  width: 120px;
}
</style>